<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>角色信息列表</title>
<script type="text/javascript" th:src="@{/js/userConfig/customerList.js}"></script>
<style>
	.el-transfer {padding-left: 55px !important;}
	.el-transfer-panel{width:350px !important; }
</style>
</head>
<body>
	 <div id="pageDiv">
	 	<div>
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>系统管理</el-breadcrumb-item>
			  <el-breadcrumb-item>客户管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br/>
		<!-- 新增客户 -->
		<div>
			<template>
				<el-dialog title="新增客户" :visible.sync="dialogAdd" width="30%">
				    <el-form :inline="false" :model="customerAdd" ref="customerAdd" label-position="right" size="small" :rules="rules">
						  <el-form-item label="公司名称" prop="name">
						  	<el-col :span="15">
						    	<el-input v-model="customerAdd.name" placeholder="公司名称"></el-input>
						    </el-col>
						  </el-form-item>
						  <el-form-item label="公司全名" prop="nameDetails">
						  	<el-col :span="14">
						       <el-input v-model="customerAdd.nameDetails" placeholder="公司全名"></el-input>
						     </el-col>
						  </el-form-item>
						  <el-form-item label="公司简介" prop="introduction">
						  	<el-col :span="14">
						       <el-input v-model="customerAdd.introduction" placeholder="公司简介 "></el-input>
						     </el-col>
						  </el-form-item>
						   <el-form-item label="公司域名" prop="domainUrl">
						  	<el-col :span="14">
						       <el-input v-model="customerAdd.domainUrl" placeholder="公司域名 "></el-input>
						     </el-col>
						  </el-form-item>
					</el-form> 
					<span slot="footer" class="dialog-footer">
					    <el-button size="mini" type="primary" @click="addForm('customerAdd')">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</span>
				</el-dialog>
				<el-button size="small" type="primary" @click="openAddDialog()">新增客户</el-button>
			</template>
		</div>
		<!-- 新增客户 -->
		
		<br/>
		
		<!-- 角色配置列表 -->
		<div>
			<template>
				<!-- 表格 -->
				<el-table  v-loading="loading" :data="tableData" height="410"  style="width: 100%">
				    <el-table-column prop="name" label="公司名称" width="150"></el-table-column>
				    <el-table-column prop="nameDetails" label="公司全名" width="300"></el-table-column>
				    <el-table-column prop="introduction" label="公司简介" width="400"></el-table-column>
				    <el-table-column prop="domainUrl" label="公司域名" width="100"></el-table-column>
				    <el-table-column label="编辑角色权限">
				      <template slot-scope="scope">
						<el-button size="mini" type="primary" plain @click="getRoleData(scope.row)">修改</el-button>
				        <!-- <el-button size="mini" type="primary" plain @click="updatePermission(scope.row.id)">角色菜单权限</el-button>
				        <el-button size="mini" type="primary" plain @click="updateJob(scope.row.id)">角色作业权限</el-button> -->
				        <el-button size="mini" type="danger" plain @click.native.prevent="deleteConfig(scope.$index, scope.row,tableData)"> 删除</el-button> 
				      </template>
				    </el-table-column>
				</el-table>
				<!-- 分页 -->
		    	<el-pagination 
		    		background
		    		@size-change="handleSizeChange" 
		    		@current-change="handleCurrentChange" 
		    		:current-page="currentPage"  
		    		:page-sizes="[3,5,10]" 
		    		:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" 
		    		:total="totalSize">
    			</el-pagination>
    			<!-- 使用dialog方式 -->
				<el-dialog :title="dialogTitle" :visible.sync="dialogEdit"  width="30%">
				    <el-form :inline="false" :model="customer" label-position="right" size="small">
						  <el-form-item label="公司名称">
						 	 <el-col :span="15">
						   		 <el-input v-model="customer.name" placeholder="公司名称"></el-input>
						   	 </el-col>
						  </el-form-item>
						  <el-form-item label="公司全名">
						  	  <el-col :span="14">
						    	  <el-input v-model="customer.nameDetails" placeholder="公司全名"></el-input>
						      </el-col>
						  </el-form-item>
					</el-form> 
					<div style="text-align: right; margin: 0">
					    <el-button size="mini" type="primary" @click="editForm()">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</div>
				</el-dialog>
				
				<!-- 新增角色菜单 使用dialog方式  fullscreen -->
				<el-dialog title="角色菜单" :visible.sync="dialogMenu"  width="70%" center >
			    	<el-transfer  filterable :filter-method="filterMethodForPermission" filter-placeholder="请输入菜单名称" :titles="['所有菜单', '已选菜单']" v-model="menuRData" :data="menuLData" ></el-transfer>
					<div style="padding-top:10px; text-align:center">
					    <el-button size="mini" type="primary" @click="addPermission()">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</div>
			    </el-dialog>
			    
			    <!-- 新增角色作业 使用dialog方式  fullscreen -->
				<el-dialog title="角色作业" :visible.sync="dialogJob" width="70%" center >
			    	<el-transfer  filterable :filter-method="filterMethodForJob" filter-placeholder="请输入作业名称" :titles="['所有作业', '已选作业']" v-model="jobRData" :data="jobLData" ></el-transfer>
					<div style="padding-top:10px; text-align:center">
					    <el-button size="mini" type="primary" @click="addJob()">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</div>
			    </el-dialog>
				
			</template>
		</div>
		<!-- 角色列表 -->
		
	</div>
</body>
</html>